<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>按钮</button>
    <script>
        // 事件
        // 找到这个按钮
        var btn = document.querySelector('button');
        // 传统注册事件方式
        // btn.onclick=function(){
        //     console.log(111);
        // }

        // btn.onclick=function(){
        //     console.log(222);
        // }

        //  监听注册方式
        // addEventListener w3c 推荐
        // 第一个参数代表事件类型 （不带on）
        // 可以处理多个函数  函数执行顺序按照注册顺序执行
        // 
        // btn.addEventListener('click',function(){
        //     console.log(111);
        // });

        // btn.addEventListener('click',function(){
        //     console.log(222);
        // });

        // btn.onclick=function(){
        //     console.log(111);
        //     // 传统方式取消
        //     btn.onclick=null;
        // }

        // 移除事件  ，必须将事件单独提取出 形成一个单独的函数
        // 注意 引用函数不能加（）
        btn.addEventListener('click', fun1);

        function fun1() {
            console.log(222);
            if (true) {
                // btn.removeEventListener('click',监听事件（函数）);
                // 不能直接套进去  需要将处理函数提出来
                // btn.removeEventListener('click',fun1);
            }
        }
    </script>
</body>

</html>